<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 100px;height: 100px;background-color: red;"></div>

    <a href="https://www.baidu.com" target="_blank">百度一下</a>
    <a>baidu</a>
    <!-- 阻止默认事件的简单的做法 -->
    <a href="javascript:void(false)">baidu</a>

    <!-- <script type="text/javascript">

        var div = document.getElementsByTagName('div')[0];
        // 右键出菜单事件
        div.oncontextmenu = function(e) {  // 默认右键出菜单事件在每个元素上
            console.log('a');
            console.log(e);
            // e.preventDefault(); //W3C标注的
            // e.returnValue = false; //兼容IE
            // cancelHandler(e);
            //默认事件的执行在冒泡之后，默认事件不会冒泡

        }
        document.oncontextmenu = function(e) {
            console.log('a');
            // e.preventDefault();
        }
        

        // 封装阻止默认事件函数
        function cancelHandler(event){
            if(event.preventDefault){
                event.preventDefault();
            }else{
                event.returnValue = false;
            }
        }
    
    </script> -->

    <script>

        var a = document.getElementsByTagName('a')[0];

        document.body.onclick = function(e) {
            console.log('b');
            cancelHandler(e);
        }
        a.onclick = function(e) {
            // cancelHandler(e);
            console.log('a');
        }

        function cancelHandler(event){
            if(event.preventDefault){
                event.preventDefault();
            }else{
                event.returnValue = false;
            }
        }

    </script>
</body>
</html>